<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import { useLocale } from '@/locale/locale';
import { usePopupStore } from '@/store/popup';

withDefaults(
  defineProps<{
    preOrderSn: string;
    points: number;
    score: number;
    isUsage: boolean;
    confirmColor: string;
  }>(),
  {
    confirmColor: '#269c74'
  }
);

const { t } = useLocale();
const popupStore = usePopupStore();
const { pointPickerRef } = storeToRefs(popupStore);

defineExpose({
  open: () => {
    popupStore.openPointPicker();
  }
});

const emit = defineEmits(['update']);

async function handleConfirm() {
  popupStore.closePointPicker();
  emit('update');
}
</script>

<template>
  <apt-popup
    ref="pointPickerRef"
    :confirm-text="isUsage ? t('tripCancelSelection') : t('LLKey_loginCheckConfirm')"
    :title="t('LRKey_scoreReduction')"
    :confirm-btn-color="confirmColor"
    @close="popupStore.closePointPicker"
    @confirm="handleConfirm"
  >
    <view class="flex justify-between items-center">
      <text class="text-base text-primary font-medium">
        {{ t('LRKey_currentScore', { score: points }) }}
      </text>
      <text class="text-sm text-red">-{{ Math.min(score, points) }}</text>
    </view>
    <view class="text-sm text-red mt-2_5" style="padding-bottom: 88rpx">
      {{ t('LRKey_scoreReductionTip') }}
    </view>
  </apt-popup>
</template>

<style></style>
